$(function(){
    
    /*
    需求：
        1.页面加载,获取后台数据展示到文章标题的表格中-->封装函数
            1.1 三步：空数组,遍历添加,join('')新增至页面
            1.2 获取数据需要四个参数,其中有两个非必传项,参数不同获取数据不同
                1.2.1 将这四个参数用全局对象保存,传参即传该变量
                1.2.2 当需要调用该函数展示不用数据时,只需修改全局对象内的值
        2.点击文章列表的筛选按钮,表格展示区展示相应筛选数据
            2.1 页面加载,文章列表的分类选项数据来自于后台
                2.1.1 根据后台数据渲染文章列表的分类选项时,自定义属性保存Id-->发送请求需要
                2.1.2 调用三方框架方法重新渲染多选样式form.render()
            2.2 状态选项的值(已发布、草稿)会作为参数传递给全局对象作为筛选条件
            2.3 点击筛选按钮(表单提交),将表单数据赋值给全局对象,渲染表格展示区
        3.分页展示功能-->封装函数
            3.1 自定义函数封装三方框架的分页功能-->laypage.render()参数根据框架定制
            3.2 当页码发生变化,将改变后的页码传给全局对象,渲染表格
                3.2.1 触发jump函数,jump函数中的obj对象包含了当前页的所有参数
                3.2.2 通过obj.curr将改变后的页码赋值给全局对象
                3.2.3 渲染表格
            3.3 页面中的表格数据渲染完成,调用分页展示函数,其参数为默认值
        4.删除功能-->事件委托
            4.1 根据删除按钮身上自定义属性携带的id发送请求,删除数据
            4.2 重新渲染页面
            4.3 如果删除的是最后一页的最后一项,会出现页码减一但数据不显示的bug
                4.3.1 前置知识点：我们发起请求删除服务器数据后,页面数据是没有删除,任然存在的
        5.修改功能-->跳转新页面
            5.1 根据接口文档需要获取本页面修改文章的id
                5.1.1 方法一：本地存储,需要取用时从本地获取
                5.1.2 方法二：路由参数携带id-->
    */ 

    // 全局对象存储发送给服务器的参数
    let q = {
        pagenum:1,
        pagesize:20,
        cate_id:'',
        state:''
    }
    let layer = layui.layer
    let form = layui.form
    // 1.页面加载,获取后台数据展示到文章标题的表格中-->封装函数
    function initArtList(){
        axios({
            method:'GET',
            url:'/my/article/list',
            params:q
        }).then(({data:res})=>{
            if(res.status) return layer.msg(res.message) 
            let arr =[]
            res.data.forEach(ele=>{
                if(ele.Id<0) return  //在forEach函数中,res.data已经被解构,获取不到了
                // if(res.data.Id<0) return //forEach遍历中return不会退出函数,会等遍历完成
                arr.push(`
                    <tr>
                        <td>${ele.title}</td>
                        <td>${ele.cate_name}</td>
                        <td>${ele.pub_date}</td>
                        <td>${ele.state}</td>
                        <td>
                            <a href="/article/art_edit.html?id=${ele.Id}" class="layui-btn layui-btn-xs">修改</a>
                            <button " type="button" class="delBtn layui-btn layui-btn-danger layui-btn-xs btn-delete" data-id="${ele.Id}">删除</button>
                        </td>
                    </tr>
                `)
            })
            $('tbody').empty().html(arr.join(''))
            // 页面加载完成,展示分页功能
            renderPage(res.total)
        })
    }

        // 2.1 页面加载,文章列表的分类选项数据来自于后台
    axios({
        method:'GET',
        url:'/my/article/cates'
    }).then(({data:res})=>{
        if(res.status) return layer.msg(res.message)
        let arr = ['<option value="">请选择分类</option>']
        res.data.forEach(ele=>{
            if(ele.Id<0) return
            // if(res.data.Id<0) return //forEach遍历中return不会退出函数,会等遍历完成
            arr.push(`
                <option value="${ele.Id}">${ele.name}</option>
            `)
        })
        $('[name=cate_id]').empty().html(arr.join(''))
        form.render()
    })
    // 2.点击文章列表的筛选按钮,表格展示区展示相应筛选数据
    $('#filterForm').on('submit',function(e){
        e.preventDefault()
        q.cate_id =  $('[name=cate_id]').val()
        q.state =  $('[name=state]').val()
        initArtList()
    })

    // 3.分页展示功能-->封装函数
    function renderPage(total){
        // 分页展示区基础设置
        layui.laypage.render({
            elem: 'page-box' ,//注意，这里的 test1 是 ID，不用加 # 号
            count: total , //数据总数，从服务端得到
            limit:q.pagesize,//每页显示的条数
            curr:q.pagenum,//
            layout:['count','limit','prev','page','next','skip'],
            limits:[2,3,5,10,20],//每页显示条数的可选项-->需要有limit选项
            jump:function(obj,first){
                // obj对象会接收当前页面的所有数据
                if(!first){
                    q.pagenum  = obj.curr
                    q.pagesize = obj.limit
                    initArtList()
                }
            }
        })
    }
    
    // 4.1 根据删除按钮身上自定义属性携带的id发送请求,删除数据,重新渲染页面
    $('tbody').on('click','.delBtn',function(){
        let id = $(this).attr('data-id')
        layer.confirm('是否确认删除该文章?', {icon: 3, title:'提示'}, function(index){
            //do something
            axios({
                method:'GET',
                url:'/my/article/delete/'+id,
            }).then(({data:res})=>{
                console.log(res)
                if(res.status) return layer.msg(res.message)
                layer.msg('恭喜您，删除文章成功')
                // 在渲染完成前进行判断,消除bug
                if($('.delBtn').length==1){
                    q.pagenum--
                }
                initArtList()
            })
            layer.close(index);
          });
        
    })





    initArtList()
})